<template>
  <div class="smartDetail">
    <van-nav-bar
      :title="$route.params.name"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push('/search')"
    >
      <template #right>
        <i class="iconfont icon-sousuo"></i>
      </template>
    </van-nav-bar>
    <div style="border-bottom: 0.266667rem solid rgb(242, 243, 254)"></div>
    <div v-for="(value, index) of notebookList" :key="index">
      <div class="content_product">
        <div
          class="product_content"
          v-for="item of value.List"
          :key="item.id"
          @click="$router.push('/details')"
        >
          <img :src="item.url" />
          <div class="align-center">
            <div class="name">{{ item.name }}</div>
            <div class="brief">{{ item.introduction }}</div>
            <div class="price">
              ￥{{ item.newPrice
              }}<span class="price_old"
                ><s v-if="item.oldPrice">￥{{ item.oldPrice }}</s></span
              >
            </div>
            <div class="buybtn">立即购买</div>
          </div>
        </div>
      </div>
      <div style="border-bottom: 0.266667rem solid rgb(242, 243, 254)"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "smartDetail",
  data() {
    return {
      notebookList: [
        {
          List: [
            {
              id: 1101,
              name: "米兔儿童学习手表4X",
              introduction: "米兔儿童学习手表4X",
              url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ca6431d71e49519fdf2d0079d0e72570.jpg?w=516&h=420",
              newPrice: "499",
              oldPrice: "599",
            },
            {
              id: 1102,
              name: "小米手环5 腕带",
              introduction: "8色夏日多彩腕带，潮流百搭",
              url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/00bb84f8805a841a86145936af9a0e12.jpg?w=516&h=420",
              newPrice: "19.9",
            },
          ],
        },
        {
          List: [
            {
              id: 1101,
              name: "小米真无线蓝牙耳机Air2 SE",
              introduction: "放肆用，畅快听",
              url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a7ef7d9c0d2da73fbe3f181f9c9d6aaf.jpg?w=516&h=420",
              newPrice: "129",
              oldPrice: "169",
            },
            {
              id: 1102,
              name: "小米小爱触屏音箱",
              introduction: "好听，更好看",
              url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e1dbc0b9f1cdce7ece01fffacff516dd.png?w=516&h=420",
              newPrice: "249",
            },
          ],
        },
        {
          List: [
            {
              id: 1101,
              name: "九号平衡车",
              introduction: "年轻人的酷玩具",
              url: "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/7da3c5258f3cfc3a19b20ca5bc323132.jpg?w=516&h=420",
              newPrice: "2199",
            },
            {
              id: 1102,
              name: "九号卡丁车Pro兰博基尼汽车定制版",
              introduction: "九号卡丁车Pro兰博基尼汽车定制版",
              url: "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/001092b37924352e148894d0a14fcda6.jpg?w=516&h=420",
              newPrice: "9999",
            },
          ],
        },
      ],
    };
  },
};
</script>
<style lang="less">
.smartDetail {
  .van-nav-bar {
    background-color: rgb(242, 242, 242);
    position: sticky;
    width: 100%;
    top: 0px;
    .van-nav-bar__left {
      .van-icon,
      .van-nav-bar__text {
        font-size: 16px;
        line-height: 46px;
        color: #8a8a8a;
      }
    }
  }
  .content_television {
    img {
      width: 100%;
    }
  }
  .content_product {
    padding: 0px 1.7vw;
    display: flex;
    background-color: rgb(242, 243, 254);
    .product_content {
      border-radius: 0.1rem;
      width: 48.3%;
      overflow: hidden;
      &:nth-child(odd) {
        margin-right: 1.7vw;
      }
      img {
        width: 100%;
      }
      .align-center {
        text-align: center !important;
        padding: 10px 14px;
        background-color: #fff;
        -webkit-box-align: center;
        align-items: center;
        .name {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 3.8vw;
          line-height: 3.8vw;
          color: rgba(0, 0, 0, 0.87);
        }
        .brief {
          margin-top: 0.85vw;
          font-size: 2.8vw;
          line-height: 3.8vw;
          color: rgba(0, 0, 0, 0.54);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .price {
          font-size: 3.8vw;
          color: #ea625b;
          height: 1.5em;
          line-height: 1.5em;
          position: relative;
          font-weight: 700;
          .price_old {
            display: inline-block;
            margin: 0 1.4vw;
            font-size: 2.8vw;
            color: rgba(0, 0, 0, 0.54);
          }
        }
        .buybtn {
          width: 60%;
          margin: 0 auto;
          background: #ea625b;
          text-align: center;
          color: #fff;
          font-size: 3.4vw;
          padding: 2.21vw 0;
          font-weight: 700;
        }
      }
    }
  }
}
</style>